<template>
  <el-select
    ref="commonSelectM"
    :value="selectValue"
    :placeholder="placeholder"
    multiple
    style="width: 100%"
    :loading="loading"
    :disabled="disabled"
    filterable
    :filter-method="handleCommonFilter"
    @focus="getDataSource"
    @change="selChange"
  >
    <el-option
      :value="value"
      class="options"
      style="height:220px;background-color:#fff;overflow-y:auto;"
    >
      <el-tree
        id="tree-option"
        ref="commonTreeM"
        :style="{
          width: '100%'
        }"
        accordion
        :filter-node-method="filterNode"
        :data="item.opintion"
        @node-click="handleCommonClick"
      >
        <!-- <span slot-scope="{ node, data }" class="span-ellipsis"> -->
        <span slot-scope="{ data }" class="span-ellipsis">
          <span :title="data[showLabelKey]">{{ data[showLabelKey] }}</span>
        </span>
      </el-tree>
    </el-option>
  </el-select>
</template>

<script type="text/ecmascript-6">
import { getCommonData } from '@/api/reportCenter';
import { setFatherNode } from '../common';

export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    placeholder: {
      type: String,
      default: () => {
        return '请选择';
      }
    },
    disabled: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    selectValue: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      loading: false,
      value: ''
      // saveCommonOptions: []
    };
  },

  computed: {
    showLabelKey() {
      return this.item.selectViewOptions && this.item.selectViewOptions.renderValue;
    }

  },
  methods: {
    getDataSource() {
      const item = this.item;
      if (!this.item.opintion.length) {
        this.loading = true;
        if (!item.focusUrlParams || !item.focusUrl || JSON.stringify(item.focusUrlParams) === '{}') return this.$message.error('请求参数未配置');
        getCommonData(item.focusUrlParams, item.focusUrl).then(({ data: res }) => {
          this.loading = false;
          if (res.success) {
            setFatherNode(res.data);
            this.item.opintion = res.data;
          } else {
            this.item.opintion = [];
          }
        });
      } else {
        this.$forceUpdate();
      }
    },
    handleCommonFilter(val) {
      this.$refs.commonTreeM.filter(val);
    },
    handleCommonClick(data, node) {
      if (!data.children) {
        this.$emit('changeData', {
          data,
          node,
          item: this.item
        });// select事件触发后，自动触发showCityName事件
        this.$refs.commonSelectM.blur();
        // this.$forceUpdate();
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.showLabelKey].indexOf(value) !== -1;
    },

    selChange(a) {
      this.$emit('selChange', a);
    }

  }
};
</script>
<style lang="scss" scoped>
.el-select-dropdown__item {
  padding: 0 5px !important;
}
</style>
